import { listenCssVar } from '../cssVarPropsFunc/listenCssVar';
import { removeClass, SetStaticCssTxtFunc } from '../global';

/**
 * @time 2024.01.12 16:39 晴 drage
 * -- window 存储 div 的 设置信息 data 为 id  id 为 相关设置信息
 */
/**
 * 目标元素
 */
let targetEl;

/**
 * css 变量控制
 */
let cssvarObj;

/**
 * v-drag 拖拽指令 的 样式
 * css var 动态 top left 样式
 */
let StaticCss = SetStaticCssTxtFunc('vDrag');

/**
 * 鼠标点击后 计算得出 当前 鼠标位置 和 距离元素的 用户位置
 */
let currentOp = {
  /** move 开始 时 元素的位置 */
  startTop: undefined,
  startLeft: undefined,
  /** 隐藏目标 好像用不到 global 可以删  */
  /** move 开始 位移的相对量 */
  moveX: 0,
  moveY: 0,
  /** 鼠标在 目标元素中的位置信息 */
  clientTop: undefined,
  clientLeft: undefined,
};

function initvd(element, outer) {
  // outer 为 true 时 尽可能复制一个元素
  if (outer) {
    console.log('复制一个元素');
    // element 更改定向
  }
  targetEl = element;
  cssvarObj = listenCssVar(element);
  //   鼠标 移入事件
  targetEl.addEventListener('mouseenter', enterAddH);
  //   鼠标 移出事件
  targetEl.addEventListener('mouseleave', leaveAddH);

  let staCssCla = `v_drag_${targetEl.id}`;
  let V_DCla = `v_D_${targetEl.id}`;

  //   添加 动态 css var 样式 到 head 元素中
  cssVar_top0left(staCssCla, V_DCla);

  // 添加 class 到 目标元素中
  removeClass(targetEl, V_DCla, true);

  // 添加 hover 鼠标 手形状
  removeClass(targetEl, 'cursorPointer', true);
}

/**
 * @param {Event} event event 鼠标移入事件
 */
function enterAddH() {
  //   console.log(event);
  //   currentOp['startTop'] = event.target.offsetTop;
  //   currentOp['startLeft'] = event.target.offsetLeft;
  // 添加 mouse down 事件
  targetEl.addEventListener('mousedown', downH);
  // 添加 mouse up 事件
  targetEl.addEventListener('mouseup', upH);
  //   console.log('mouse enter');
}
/**
 * @param {Event} event event 鼠标移出事件
 */
function leaveAddH() {
  // 移除 mouse down 事件
  targetEl.removeEventListener('mousedown', downH);
  // 移除 mouse up 事件
  targetEl.removeEventListener('mouseup', upH);
  //  如果元素鼠标 脱离 移除 windows 上挂载的 moveH
  window.removeEventListener('mousemove', moveH);
  //   console.log('mouse leave');
}

/**
 * 鼠标点下 开启元素跟随 鼠标位移 效果
 * @param {Event} event event 鼠标 点下事件
 */
function downH(event) {
  currentOp['startTop'] = targetEl.offsetTop;
  currentOp['startLeft'] = targetEl.offsetLeft;
  currentOp['clientTop'] = event.pageY - currentOp['startTop'];
  currentOp['clientLeft'] = event.pageX - currentOp['startLeft'];

  //   console.log(event);
  window.addEventListener('mousemove', moveH);
}

/**
 * 鼠标抬起 取消元素跟随效果
 * @param {Event} event event 鼠标 抬起事件
 */
function upH() {
  //   currentOp['moveX'] = 0;
  //   currentOp['moveY'] = 0;
  currentOp['startTop'] = targetEl.offsetTop;
  currentOp['startLeft'] = targetEl.offsetLeft;

  window.removeEventListener('mousemove', moveH);
}

/**
 * 鼠标移动 设置元素的 内置样式 top 和 left 启用跟随效果
 * @param {Event} event 鼠标移动 设置 内置样式的 top 和 left
 */
function moveH(event) {
  //   currentOp['moveX'] += event.movementX;
  //   currentOp['moveY'] += event.movementY;
  //   console.log(currentOp['startTop'], currentOp['moveY']);

  followEl(
    event.pageY - currentOp['clientTop'],
    event.pageX - currentOp['clientLeft']
  );
}

/**
 * 根据 top 和 left 的 值 设置 cssVar
 * @param {string} top 默认不带单位 px
 * @param {string} left 默认不带单位 px
 */
function followEl(top, left) {
  //   console.log(top, left);
  cssvarObj.setCssVar('--top', top + 'px');
  cssvarObj.setCssVar('--left', left + 'px');
}

function cssVar_top0left(staCssCla, V_DCla) {
  StaticCss(staCssCla, `.${V_DCla}{top : var(--top); left : var(--left);}`);
  // targetEl.style = 'top: var(--top)px; left: var(--left)px;';
}

export { initvd };
